<template>
  <div v-loading="saveLoading">
    <el-upload
      ref="uploadRef"
      v-model:file-list="fileList"
      :action="action"
      :auto-upload="autoUpload"
      :before-upload="beforeUpload"
      class="upload-demo"
      drag
      :headers="headers"
      :limit="1"
      :multiple="isMultiple"
      name="fileInput"
      :on-error="uploadFilled"
      :on-exceed="handleExceed"
      :on-success="uploadSuccessed"
      style="width: 200px; height: 200px"
    >
      <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
      <div class="el-upload__text">{{ translate('上传文件') }}</div>
    </el-upload>
    <!-- <File v-if="form.uniqueCode" ref="editFile" :form-id="form.uniqueCode" /> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { useUserStore } from '@/store/modules/user'
  import { baseURL } from '@/config'
  // import File from '@/views/components/file'
  import { genFileId } from 'element-plus'
  import { translate } from '@/i18n'

  const { token } = useUserStore()
  const action = ref(`${baseURL}/WF_Document/UploadFile`)
  const headers = reactive({ Authorization: `Bearer ${token}` })

  const props = defineProps({
    versionData: {
      type: Object,
      default() {
        return {}
      },
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    uniqueCode: {
      type: String,
      default: '',
    },
  })
  const fileList: any = ref([])
  watch(
    () => props.versionData,
    () => {
      if (props.versionData.VersionUrl) {
        const name = props.versionData.VersionUrl.substring(
          props.versionData.VersionUrl.lastIndexOf('/') + 1,
          props.versionData.VersionUrl.length
        )
        fileList.value = [{ name: name, url: props.versionData.VersionUrl }]
      } else {
        fileList.value = []
      }
    },
    { deep: true, immediate: true }
  )
  const emit = defineEmits(['success', 'fail'])
  const form: any = ref({})
  const saveLoading = ref(false)
  const beforeUpload = (rawFile: any) => {
    const ext = rawFile.name.substring(
      rawFile.name.lastIndexOf('.') + 1,
      rawFile.name.length
    )
    const query = `?ID=${props.versionData.ID}&codetype=${props.versionData.VersionName}&code=${props.versionData.VerType}&solution=${props.versionData.Solution}&ext=.${ext}`
    action.value = `${baseURL}/CSVersion/CSVerFile${query}`
    // action.value = `http://192.168.1.8:9011/api/CSVersion/CSVerFile${query}`
  }
  const uploadFilled = () => {
    saveLoading.value = false
  }
  // let count = 0
  const uploadSuccessed = async (val: any) => {
    console.log(val)
    if (val.code == 200) {
      emit('success', val.data)
    } else {
      emit('fail')
    }
    saveLoading.value = false
    // if (val.code == 200) {
    //   count++
    //   if (count === fileList.value.length) {
    //     emit('success', form.value)
    //     count = 0
    //   }
    // } else {
    //   saveLoading.value = false
    //   count = 0
    //   emit('fail')
    // }
  }
  const S4 = () => {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  const getRandom = () => {
    return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`
  }
  const uploadRef: any = ref(null)
  const uploadBatch = () => {
    if (fileList.value.length) {
      if (!form.value.uniqueCode) {
        form.value.uniqueCode = getRandom()
      }
      saveLoading.value = true
      uploadRef.value.submit()
    } else {
      saveLoading.value = true
      emit('success', form.value)
      saveLoading.value = false
    }
  }
  const handleExceed = (files: any) => {
    uploadRef.value?.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  ::v-deep .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

  ::v-deep .el-upload-dragger {
    padding: 4px;
  }
</style>
